<template>
  <div class="panel panel-default">
    <div class="panel-heading  position-relative">
      <TitleTip :title=titleDetail position="bottom">
        <span class="fs-6 fw-lighter position-absolute end-0" style="margin-right: 10px">
            {{this.$store.state.user.userMate.length}}/{{Math.ceil((this.$store.state.user.userInfo.soul+this.$store.state.user.userInfo.buff.soul)/10)}}
          </span>
        <h3 class="panel-title">
          {{ title }}
        </h3>
      </TitleTip>
    </div>
    <div class="panel-body">
      <ul class="list-group">
        <template v-for="(item,key) in this.$store.state.user.userMate" :key="item" >
          <li  class="list-group-item"  data-bs-toggle="collapse" :href="'#collapseMate'+key" role="button" aria-expanded="false"
              :aria-controls="'collapseMate'+key">
  <!--          <input class="form-check-input btn-success" type="checkbox" :id="'checkboxNoLabel'+item" value="" aria-label="...">-->
            <div class="btn-group pull-right" role="group">
              <button @click="sex(key)" :style="'display:'+(item.state===1?'none':'block')" class="btn btn-default btn-xs">双修</button>
              <button @click="stopSex(key)" :style="'display:'+(item.state===0?'none':'block')"  class="btn btn-default btn-success btn-xs">双修中</button>
              <button @click="remove(key)" :style="'display:'+(item.state===1?'none':'block')"  class="btn btn-default btn-xs">抛弃</button>
            </div>
            <button type="button" class="btn btn-xs" style="font-size: 6px" disabled>{{ item.levelName }}</button>
            <TitleTip :title="
                (item.expSpeed>0?item.expSpeed+'修为速度、':'')"
                      position="bottom">
              {{ item.name ?? '' }}
            </TitleTip>
          </li>
          <li class="list-group-item collapse" :id="'collapseMate'+key">
            <ul class="list-group list-group-compact">
              <li :class="item.expSpeed<=0?'d-none':''" class="list-group-item text-success">增加{{item.expSpeed}}修练速度</li>
            </ul>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import TitleTip from './TitleTip.vue'

export default {
  name: 'UserMate',
  data: function () {
    return {
      title: "好友列表",
      titleDetail:"道侣可双修，增加修炼速度；有几率触发赠送物品：法宝、功法、丹药、(灵石)",
    }
  },
  components: {
    TitleTip,
  },
  mounted() {
  },
  methods:{
    /**
     * 停止双修
     * @param key
     */
    stopSex(key){
      let mate =  this.$store.state.user.userMate[key];

      if(mate.state === 1){
        this.$store.state.user.userInfo.buff.expSpeed -= mate.expSpeed
      }
      mate.state = 0;
      this.$store.state.user.userMate[0].state = 0

      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
    },
    /**
     * 双修
     * @param key
     */
    sex(key){
      let mate =  this.$store.state.user.userMate[key];

      // 将首个设为未双修
      if(this.$store.state.user.userMate.length>0){
        this.stopSex(0)
      }

      // 剔除指定道侣，排序至第一个
      this.$store.state.user.userMate.splice(key,1)
      mate.state = 1;
      this.$store.state.user.userMate.unshift(mate)

      // 增加buff
      this.$store.state.user.userInfo.buff.expSpeed += mate.expSpeed
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
    },
    /**
     * 抛弃道侣
     * @param key
     * @returns {boolean}
     */
    remove(key){
      let mate =  this.$store.state.user.userMate[key];
      // 双修中
      if(mate.state===1){
          return false
      }
      this.$store.state.user.userMate.splice(key,1)
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form-check-input:checked {
  background-color: #28a745;
  border-color: #28a745;
}

.form-check-input:focus, .form-check-input:active {
  border-color: #28a745;
  box-shadow: 0 0 0 5px rgba(40, 167, 69, 0.2);
}
</style>
